 // maxlength 是一个表单属性, 作用是给表单设置一个最大长度

    // 模拟数据
    let dataArr = [
        { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
        { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
        { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
        { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
        { uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
        { uname: '张良', imgSrc: './images/9.5/06.jpg' },
        { uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
        { uname: '李白', imgSrc: './images/9.5/08.jpg' },
        { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
        { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
        { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
        { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
        { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
        { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
        { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
        { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
        { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
        { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
        { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
        { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
        { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
        { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
      ]
  
      // 需求 1
      // 1.注册 input 事件
      // 2.将文本的内容长度赋值给对应数值
      // 3.表单的 maxlength 属性可以直接限制在 200 个数之间
      var textarea = document.querySelector('textarea')
      var useCount = document.querySelector('.useCount')
  
      // 发布按钮
      var send = document.querySelector('#send')
  
      // 获取ul
      var ul = document.querySelector('#list')
      
      textarea.addEventListener('input',function(){
        // console.log(this.value.length);
        useCount.innerHTML = this.value.length
      })
  
      // 需求 2 判断不能为空
      // 点击button之后判断
      // 判断如果内容为空 ，则提示不能输入, 并且直接 return
      // 防止输入无意义空格 , 使用字符串 .trim() 去掉首尾空格 , 并将表单的 value 值设置为空字符串
      send.addEventListener('click',function(){
        // console.log('   str ');
        // console.log('   str '.trim());
        if(textarea.value.trim() === ''){
          // 并将表单的value值设置为空字符串
          textarea.value=''
          // 同时下面红色的值也设置为0
          useCount.innerHTML = 0
          return alert('内容不能为空')
        }
  
        // 编写随机数
        function getRandom(min,max){
          return Math.floor(Math.random()*(max-min+1))+min
        }
        var random = getRandom(0,dataArr.length-1)
  
      // 需求 3 新增留言
      // 创建一个li，然后通过innerHTML追加数据
        var li = document.createElement('li')
        // 准备内容
  
  
        li.innerHTML = `
        <div class="info">
          <img class="userpic" src=${dataArr[random].imgSrc} />
          <span class="username">${dataArr[random].uname}</span>
          <p class="send-time">${new Date().toLocaleString()}</p>
        </div>
        <div class="content">${textarea.value}</div>
        <span class="the_del">X</span>
        `
        // 利用时间对象将时间动态化  new Date().toLocaleString()
        ul.insertBefore(li,ul.children[0])
        // 需求 4 删除留言  放到追加的前面
      // 在事件处理函数里面获取点击按钮 注册点事件
      // （注意：必须是要在事件里面获取，外面获取不到）
      // 删除对应的元素（通过this获取对应的那条需要删除的元素）
      // 在事件里面获取元素就是不用document了，而是要获取操作的那个对象
      
      var del =li.querySelector('.the_del')
      
      del.addEventListener('click',function(){
        var result = prompt("请输入密码222");
      if (result == "222") {
        // if(result.value.trim() === ''){
          
        // 放进追加的ul前面 这样创建元素的同时随便绑定了事件
      ul.removeChild(li)
      }else{
        alert('密码错误请重新输入！')
      // }
      }
      })
      // 需求 5 发布后重置
      // 将表单域内容重置清空
      textarea.value = ''
      // 同时下面红色的字体设置为0
      useCount.innerHTML = 0
      })
      
  
      // 按下回车 可以生成留言信息
      textarea.addEventListener('keyup',function(e){
        // console.log(e.keyCode);   //废弃 只要知道e.key = '回车键'
        // 发布消息自动触发点击按钮
        if(e.key==='Enter')
        send.click()
      })
    

        var str= li.innerHTML
        saveText();
        
        function saveText(){ 
        var win=window.open();
        win.document.open("text","gb2312");
        win.document.write(str);
        win.document.execCommand("SaveAs",true,"newfile.txt");
        win.close();
        }
      
